<template>
    <div style="background-color: #99ccff; height: 100%; overflow: hidden">
        <h1 style="font-size: 1.7em; color: #3399cc; padding-top: 5%">学生在线练习系统</h1>
        <hr style="width: 75%; border-color: rgba(151, 151, 151, 0.3);"/>
        <a-menu style="width: 100%; background-color: #99ccff; padding-bottom: 51%" mode="vertical" @click="handleClick" v-model="nowkey">
            <a-menu-item  key="/space/info">
                <a-icon style="font-size: 1.3em;" type="user"/>
                <font class="itemfont">个人主页</font>
            </a-menu-item>
            <a-menu-item key="/space/exercise">
                <a-icon style="font-size: 1.3em" type="calculator" />
                <font class="itemfont">在线练习</font>
            </a-menu-item>
            <a-menu-item key="/space/rank">
                <a-icon style="font-size: 1.3em" type="trophy" />
                <font class="itemfont">排行榜</font>
            </a-menu-item>
        </a-menu>
        <img v-if="nowkey.indexOf('/space/info')>=0" alt="侧边栏图片" src="@/assets/image/info-sidebar.png"  width="100%" />
        <img v-if="nowkey.indexOf('/space/exercise')>=0" alt="侧边栏图片" src="@/assets/image/exercise-sidebar.png" width="100%"/>
        <img v-if="nowkey.indexOf('/space/rank')>=0" alt="侧边栏图片" src="@/assets/image/rank-sidebar.png" width="100%"/>
    </div>
</template>
<script>
    export default {
        name:'SideBar',
        data(){
            return{
                nowkey:[]
            }
        },
        beforeMount() {
            const arr = this.$route.path.split('/')
            const nowKey = '/'+arr[1]+'/'+arr[2];
            this.nowkey= new Array(nowKey)
        },
        methods: {
            handleClick(e) {
                if(this.nowkey[0]!==e.keyPath[0]) {
                    this.nowkey = e.keyPath;
                    this.$router.push(e.key);
                }
            },
        }
    };
</script>

<style scoped>
    .itemfont{
        font-size: 1.3em;
    }
</style>